<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home</title>

<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/script.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/coin-slider.min.js"></script>

    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/print.css" type="text/css" media="print">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<script type="text/javascript" src="<?php echo base_url();?>assets/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="<?php echo base_url();?>assets/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
	<script language="javascript" type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.msAccordion.js"></script>
	
<!-- Load css datepicker -->
<link type="text/css" href="<?php echo base_url()?>assets/css/datepicker/ui.datepicker.css" rel="stylesheet" />
<link type="text/css" href="<?php echo base_url()?>assets/css/datepicker/ui.theme.css" rel="stylesheet" />
<link type="text/css" href="<?php echo base_url()?>assets/css/datepicker/ui.core.css" rel="stylesheet" />
<link type="text/css" href="<?php echo base_url()?>assets/css/datepicker/ui.slider.css" rel="stylesheet" />	
<script type="text/javascript" src="<?php echo base_url()?>assets/js/admin_js/jquery/ui/ui.datepicker.js"></script>

</head>

	<script type="text/javascript">

		$(document).ready(function(){	
			var first = 0;
			var speed = 700;
			var pause = 5000;
			
				function removeFirst(){
					first = $('ul#listticker li:first').html();
					$('ul#listticker li:first')
					.animate({opacity: 0}, speed)
					.fadeOut('slow', function() {$(this).remove();});
					addLast(first);
				}
				
				function addLast(first){
					last = '<li style="display:none">'+first+'</li>';
					$('ul#listticker').append(last)
					$('ul#listticker li:last')
					.animate({opacity: 1}, speed)
					.fadeIn('slow')
				}
			
			interval = setInterval(removeFirst, pause);
		});
		</script>
	 
<style type="text/css">
.set1{

-moz-border-radius : 5px;
	-webkit-border-radius : 5px;
	border-radius : 5px;
}
.set2{
background-color:#FFC732;
-moz-border-radius : 5px;
	-webkit-border-radius : 5px;
	border-radius : 5px;
}

</style>


<body class="bg_back">

	<script type="text/javascript">
		$(document).ready(function() {
			/*
			*   Examples - images
			*/

		

			$("a#example7").fancybox({
				'titlePosition'	: 'inside'
			});

			$("a[rel=example_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});


		});
	</script>
	
	<script type="text/javascript">
	$(window).load(function(){
		//for each description div...
		$('div.description').each(function(){
			//...set the opacity to 0...
			$(this).css('opacity', 0);
			//..set width same as the image...
			$(this).css('width', $(this).siblings('img').width());
			//...get the parent (the wrapper) and set it's width same as the image width... '
			$(this).parent().css('width', $(this).siblings('img').width());
			//...set the display to block
			$(this).css('display', 'block');
		});
		
		$('div.the_image').hover(function(){
			//when mouse hover over the wrapper div
			//get it's children elements with class descriptio
			//and show it using fadeTo
			$(this).children('.description').stop().fadeTo(500, 0.7);
		},function(){
			//when mouse out of the wrapper div
			//use fadeTo to hide the div
			$(this).children('.description').stop().fadeTo(500, 0);
		});
		
	});
  
	</script>
<style>
div.the_image{
	float:left;
	position:relative; /* important(so we can absolutely position the description div */ 
}
div.description{
	width:212px;
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:5px; /* position will be on bottom */
	left:0px;
	display:none; /* hide it */
	/* styling bellow */
	background-color:black;
	color:white;
}
div.description_content{
	padding:10px;
}

</style>